<template>
  <div id="air-radar">
    <div class="row">
      <div class="col col-1">
        <div class="row">
          <scan-map></scan-map>
        </div>
      </div>
      <div class="col col-2">
        <div class="row">
          <lidar-scan></lidar-scan>
        </div>
      </div>
      <div class="col col-3">
        <div class="row">
          <sailing-scan></sailing-scan>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import scanMap from "./scanMap";
import lidarScan from "./lidarScan";
import sailingScan from "./sailingScan";

export default {
  components: {
    scanMap,
    lidarScan,
    sailingScan
  }
};
</script>

<style lang="stylus" scoped>
#air-radar
  position relative
  width 100%
  height 100%

  > .row
    margin-left 390px
    height 100%

    > .col
      height 100%

      > .row
        height 100%
        padding 0 40px

    > .col
      width 1150px

#air-radar::before
  content ''
  position absolute
  top 0
  left 0
  width 100%
  height 100%
  background url("../../assets/img/airRadar/20200605171545.jpg") no-repeat top left
  background-size 3840px 1080px
  z-index -1
</style>
